<template>
  <div class="custom-table-list-wrapper">
    <div class="content">
      <div class="content-operate">
        <el-button type="primary" @click="handleAdd('新增底图')">
          <svg-icon name="add" size="15px" />
          新增底图
        </el-button>
        <!-- <el-input
          class="search-input"
          v-model="searchParams.keywords"
          placeholder="请输入底图名称"
          :suffix-icon="Search"
          clearable
        ></el-input> -->
      </div>
      <div class="content-table">
        <el-table class="custom-table" :data="tableData">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="mapName" label="底图名称" />
          <el-table-column label="缩略图">
            <template #default="scope">
              <el-image
                class="table-img"
                fit="cover"
                :preview-src-list="[scope.row.fileUrl]"
                preview-teleported
                :src="scope.row.fileUrl"
              >
                <template #placeholder>
                  <div class="image-placeholder"></div>
                </template>
                <template #error>
                  <div class="image-error">
                    <span>加载失败</span>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="底图地址" show-overflow-tooltip>
            <template #default="scope">
              <span class="link" @click="onMapUrlClick(scope.row.mapUrl)">{{
                scope.row.mapUrl
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="terrainService"
            label="地形地址"
            show-overflow-tooltip
          />
          <el-table-column prop="updateTime" label="更新时间" />
          <el-table-column prop="isDefault" label="是否默认">
            <template #default="scope">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.isDefault"
                :before-change="handleChangeDefault.bind(this, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleEdit(scope.row, '编辑底图')"
                >编辑
              </el-button>
              <el-button link type="danger" @click="handleDelete(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
    <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import { useTableList } from '@/hooks/useTableList'
import AddDialog from './add.vue'
const { copy, isSupported } = useClipboard()
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getBaseMapList,
  baseMapDelete,
  baseMapEdit,
} from '@/api/manager/dataManage/baseMap.js'
const searchParams = ref({
  name: '',
})

const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getBaseMapList, baseMapDelete)

const onMapUrlClick = (url) => {
  if (isSupported) {
    copy(url)
    ElMessage.success('复制成功')
  } else {
    ElMessage.error('不支持复制')
  }
}
const handleChangeDefault = async (val) => {
  return new Promise((resolve) => {
    ElMessageBox.confirm(`是否切换默认状态`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const res = await baseMapEdit(val.pkid, {
          ...val,
          isDefault: val.isDefault === 1 ? 0 : 1,
        })
        if (res.success) {
          ElMessage.success('切换成功')
          resolve(true)
          initTableList(1)
        } else {
          ElMessage.error(res.message)
          resolve(false)
        }
      })
      .catch(() => {
        resolve(false)
      })
  })
}
const handleBeforChange = () => {
  return new Promise((resolve) => {
    return resolve(false)
  })
}

onMounted(() => {
  initTableList(1)
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/table.scss';

.table-img {
  width: 60px;
  height: 60px;

  .image-placeholder,
  .image-error {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 240, 240);

    span {
      font-size: 12px;
    }
  }
}

:deep(.el-table) {
  .link {
    word-wrap: break-word;
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
      text-decoration: underline;
    }
  }
}
</style>
